<template>
  <div class="hero-detail-container">
    <div class="markdown-body">
      <el-row type="flex" justify="start" align="middle">
        <h3>{{detailData.name}}</h3>
        <i>{{detailData.alis}}</i>
      </el-row>
      <div style="margin-bottom: 12px">
        <strong>饱食</strong>
        <i style="margin-left: 0">{{detailData.hungry}}</i>
        <strong>·</strong>
        <strong>血量</strong>
        <i>{{detailData.hp}}</i>
        <strong>·</strong>
        <strong>精神</strong>
        <i>{{detailData.san}}</i>
        <strong>·</strong>
        <strong>空手伤害</strong>
        <i>{{detailData.damage}}</i>
      </div>
      <blockquote>{{detailData.introduce}}</blockquote>
      <MarkedContent :mdString="detailData.ability"></MarkedContent>
    </div>
  </div>
</template>

<script>
import "github-markdown-css";
import MarkedContent from "@/components/MarkedContent";

export default {
  name: "heroDetail",
  data() {
    return {
      detailData: {}
    };
  },
  components: {
    MarkedContent
  },
  activated() {
    let id = this.$route.query.id;
    this.getDetailData(id);
  },

  methods: {
    getDetailData(id) {
      this.axios
        .get("/hero/single", {
          params: {
            id
          }
        })
        .then(res => {
          this.detailData = res.data;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.hero-detail-container {
  padding: 16px;
  i {
    margin-left: 8px;
    padding-top: 16px;
    color: #999;
    font-size: 12px;
  }
}
</style>